import React from 'react';
import {Button, Form, Input, Modal, Select, TreeSelect} from 'antd';

const FormItem = Form.Item;
const {TextArea} = Input;
const {Option} = Select;

const formLayout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 13,
  },
};

const CreateForm = (props) => {
  const [form] = Form.useForm();
  const {
    onSubmit: handleAdd,
    onCancel: handleModalVisible,
    modalVisible,
    categoryList,
    parentId
  } = props;

  const handleNext = async () => {
    const fieldsValue = await form.validateFields();
    handleAdd(fieldsValue);
  };

  const renderContent = () => {
    return (
      <>
        <FormItem
          name="name"
          label="分类名称"
          rules={[
            {
              required: true,
              message: '请输入名称，不能为空，最多50个字！',
            },
            {
              max: 50,
              type: 'string',
              message: '最多50个字',
            },
          ]}
        >
          <Input placeholder="请输入,最多50个字！"/>
        </FormItem>
        <FormItem
          name="slug"
          label="分类别名"
          rules={[
            {
              required: true,
              message: '分类别名为必填项！',
            },
            {
              max: 200,
              type: 'string',
              message: '最大200个字符',
            },
          ]}
        >
          <Input placeholder="请输入,最多200个字符！"/>
        </FormItem>
        
        <FormItem name="parentId" label="父级分类">
          <TreeSelect
            showSearch
            treeData={categoryList}
            treeDefaultExpandAll
            allowClear
            dropdownStyle={{ maxHeight: 400, overflow: 'auto'}}
            placeholder="请选择"
            treeNodeFilterProp="title"
          />
        </FormItem>
        <FormItem
          name="description"
          label="分类描述"
          rules={[
            {
              max: 200,
              type: 'string',
              message: '最多200个字',
            },
          ]}
        >
          <TextArea rows={4} placeholder="请输入描述"/>
        </FormItem>
        <FormItem name="infoFlag" label="信息发布状态">
          <Select
            style={{
              width: '100%',
            }}
          >
            <Option value="1">开</Option>
            <Option value="0">关</Option>
          </Select>
        </FormItem>
      </>
    );
  };

  const renderFooter = () =>
    (
      <>
        <Button onClick={() => handleModalVisible()}>取消</Button>
        <Button type="primary" onClick={() => handleNext()}>提交</Button>
      </>
    );

  return (
    <Modal
      width={640}
      bodyStyle={{
        padding: '32px 40px 48px',
      }}
      destroyOnClose
      title="新建分类"
      visible={modalVisible}
      footer={renderFooter()}
      onCancel={() => handleModalVisible()}
    >
      <Form
        {...formLayout}
        form={form}
        initialValues={{
          infoFlag: '1',
          parentId
        }}
      >
        {renderContent()}
      </Form>
    </Modal>
  );
};

export default CreateForm;
